<template>
	<div>
		<el-form ref="form" :model="form" :rules="formRules" label-width="120px">
			<el-form-item label="名称" prop="pollutionId">
				<div class="displayFlex">
					<el-select v-model="form.pollutionId" filterable placeholder="名称" style="width: 210px;" @change="changePollution">
						<el-option v-for="item in wasteList" :key="item.id" :label="item.pollutionName" :value="item.id">
						</el-option>
					</el-select>
					<div class="point font14 ml10" style="text-align: right;color: #B2B2B2;" @click="gotoWastePage">
						未选择到污染物，请去污染物种类库去添加
					</div>
				</div>

			</el-form-item>


			<el-form-item label="浓度限值(小时值)" prop="hourLimitConcentration">
				<el-input v-model="form.minHourLimitConcentration" style="width: 100px;"></el-input>
				<!-- <span class="ml10">{{form.unitCode}}</span> -->
				<span class="ml10 mr10">~</span>
				<el-input v-model="form.hourLimitConcentration" style="width: 100px;"></el-input>
				<span class="ml10">{{form.unitCode}}</span>
			</el-form-item>
			<el-form-item label="浓度预警(小时值)" prop="maxWarningHourLimit">
				<el-input v-model="form.minWarningHourLimit" style="width: 100px;"></el-input>
				<!-- <span class="ml10">{{form.unitCode}}</span> -->
				<span class="ml10 mr10">~</span>
				<el-input v-model="form.maxWarningHourLimit" style="width: 100px;"></el-input>
				<span class="ml10">{{form.unitCode}}</span>
			</el-form-item>
			<el-form-item label="浓度限值(日值)" prop="dayLimitConcentration">
				<el-input v-model="form.minDayLimitConcentration" style="width: 100px;"></el-input>
				<!-- <span class="ml10">{{form.unitCode}}</span> -->
				<span class="ml10 mr10">~</span>
				<el-input v-model="form.dayLimitConcentration" style="width: 100px;"></el-input>
				<span class="ml10">{{form.unitCode}}</span>
			</el-form-item>
			<el-form-item label="速率限值" prop="limitRate">
				<el-input v-model="form.limitRate" style="width: 210px;"></el-input>
				<span class="ml10">{{form.rateUnitCode}}</span>
			</el-form-item>

			<!-- <el-form-item label="治理效率" prop="defaultGovernanceEfficiency">
				<el-input v-model="form.defaultGovernanceEfficiency" style="width: 210px;" type="number"></el-input>
				<span class="ml10">%</span>
			</el-form-item> -->

			<el-form-item label="重点污染物" prop="isImportant">
				<el-radio-group v-model="form.isImportant" size="small">
					<el-radio :label="true">是重点</el-radio>
					<el-radio :label="false">非重点</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item style="text-align: right;margin-left: -90px!important;">
				<el-button type="primary" @click="saveOrUpdate" style="padding: 10px 25px;">保存</el-button>
				<el-button @click="cancle" style="background: #EBEBFE !important;color: #3A3EF4;padding: 10px 25px;">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	let that
	export default {
		name: 'addWaste',
		components: {},
		props: ['outletId', 'editData'],
		data() {
			return {
				params: {
					ticketId: '',
				},
				form: {
					pollutionId: '',
					pollutionName: '',
					unitCode: '',
					concentration: '',
					limitRate: '',
					limitRateUnitCode: '',
					defaultGovernanceEfficiency: '',
					divisorCode: '',
					isImportant: true,
				},

				formRules: {
					pollutionName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				wasteList: [],
				unitList: [],
				loading: false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.form.outletId = that.outletId
			if (that.editData) that.form = that.editData
			else that.form = that.$options.data().form
			that.getUnitList();
			that.getEntPollutionList()
		},
		methods: {
			
			changePollution() {
				let index = that.wasteList.findIndex(item => item.id == that.form.pollutionId)
				//console.log(index)
				if (index != -1) {
					that.form.concentrationUnitCode = that.wasteList[index].concentrationUnitCode
					that.form.rateUnitCode = that.wasteList[index].rateUnitCode
				}
			},

			gotoWastePage() {
				that.$router.push("/baseInfoManage/waterPollutionManage")
			},

			inputPollution(value) {
				if (that.editData) {
					if (value == that.editData.pollutionName) {
						that.form.pollutionId = that.editData.pollutionId
					} else {
						that.form.pollutionId = ''
					}
				}
				that.form.pollutionName = value
			},

			cancle() {
				that.$emit("cancle", true)
			},

			getUnitList: function() {
				var _this = this;
				that.ajax({
					url: '/codeType/listCodeValue',
					data: {
						typeCode: 'UNIT_TYPE'
					},
					success: function(data) {
						if (data.status == 1) {
							_this.unitList = data.data;
						}
					}
				});
			},

			querySearchAsync(queryString, cb) {
				var wasteList = this.wasteList;
				var results = queryString ? wasteList.filter(this.createStateFilter(queryString)) : wasteList;
				setTimeout(function() {
					cb(results);
				}, 1000)
			},

			createStateFilter(queryString) {
				return (state) => {
					return (state.pollutionName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},

			handleSelect(item) {
				that.form.pollutionName = item.pollutionName
				that.form.pollutionId = item.id
			},

			saveOrUpdate: function() {
				var _this = this;
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						_this.form.outletId = _this.outletId
						that.ajax({
							url: '/waterOutlet/saveOrUpdateWaterOutletPollution?ticketId=' + that.params
								.ticketId,
							data: JSON.stringify(_this.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.data = that.$options.data()
									that.$forceUpdate()
									if (_this.form.id) {
										that.$emit("success", true)
									} else {
										that.$emit("success", true)
									}
								} else {
									that.$message.error("保存错误")
								}
							}
						});
					}
				});
			},

			getEntPollutionList: function() {
				that.ajax({
					url: '/entPollution/getEntPollutionList?ticketId=' + that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({
						"busiStatus": "IN_USE",
						"pollutionType": "WATER_POLLUTION"
					}),
					success: function(result) {
						if (result.status == 1) {
							that.wasteList = result.data
						}
					}
				})
			},

		}
	}
</script>

<style scoped>
</style>